<template>
    <div>
        <div class="zoushitu-tabs-area">
            <div class="zoushitu-icon-title">
                <img
                    src="../../assets/imgs/chartspage-zoushitu-icon.png"
                    class="zoushitu-icon"
                    alt=""
                >
                <span class="zoushitu-title">彩种走势图</span>
            </div>
        </div>
        <!-- 多选框和表格区域 -->
        <div class="zoushifenxi-table-area">
            <div class="zoushifenxi-table-checkbox-query">
                <div class="title-left-icon-title">
                    <img
                        class="zoushifenxi-icon"
                        src="../../assets/imgs/chartspage-wuxingzoushi-icon.png"
                        alt=""
                    >
                    <span class="zoushifenxi-text">走势分析</span>
                    <div class="checkbox-group">
                        <div
                            class="checkbox-item"
                            v-for="(item,index) in checkboxGroupVar"
                            @change="clickCheckbox(index)"
                        >
                            <input
                                type="checkbox"
                                :id="index"
                                class="input-checkbox"
                                v-model="item.status"
                            >
                            <label :for="index" class="checkbox-label">{{item.title}}</label>
                        </div>
                    </div>
                </div>
                <div class="title-right">
                    <span class="query-area-input-outbox">
                        统计
                        <input
                            v-model="queryNum"
                            type="text"
                            placeholder="30"
                            class="query-area-input my_text_center"
                        >&nbsp;期
                    </span>
                    <button class="query-area-btn" @click="llQueryData">查询</button>
                </div>
            </div>
            <div class="zoushifenxi-table-box">
                <table style="fontFamily:SimSun" class="pc-table">
                    <thead>
                        <tr class="thead-one-row">
                            <td rowspan="2" class="one-row-one-td" width="100">期号</td>
                            <td rowspan="2" class="one-row-tow-td" width="70">开奖号码</td>
                            <td v-for="elem in theadOneRowOtherTdData">{{elem}}</td>
                        </tr>
                        <tr class="thead-two-row">
                            <td class="two-row-outer-td" v-for="(ele,i) in theadTwoRowData">
                                <tbody>
                                    <tr>
                                        <td v-for="e in ele" width="30">
                                            <span>{{e}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            :class="{fuzhuxian:isFuZhuXianChecked}"
                            v-for="(item,index) in tbodyData"
                            class="tbody-out-tr"
                        >
                            <td class="tbody-tr-outer-td">{{item.expect}}</td>
                            <td class="tbody-tr-outer-td">{{item.award_number}}</td>
                            <td
                                class="tbody-tr-outer-td td-center-five-col"
                                v-for="(el,i) in item.number_distribution"
                            >
                                <tbody>
                                    <tr>
                                        <td v-for="e in el" width='30'>
                                            <span
                                                :class="{red:e.status,pc_green:(e.count == 1),purple:(e.count >= 2),omit:(isOmitChecked && e.status == 0)}"
                                                class="center-five-col-span"
                                            >{{e.number}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                        <tr class="tbody-second-last-row">
                            <td class="tbody-tr-outer-td tbody-second-last-row-one-td">当前出现次数</td>
                            <td class="tbody-tr-outer-td"></td>
                            <td
                                class="tbody-tr-outer-td"
                                v-for="(el,i) in tbodySecondLastRowOtherTdData"
                                
                            >
                                <tbody>
                                    <tr>
                                        <td v-for="e in el" width='30'>
                                            <span>{{e}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                        <tr class="tbody-last-row">
                            <td class="tbody-tr-outer-td tbody-last-row-one-td">当前最大遗漏</td>
                            <td class="tbody-tr-outer-td"></td>
                            <td class="tbody-tr-outer-td" v-for="(el,i) in tbodyLastRowOtherTdData">
                                <tbody>
                                    <tr>
                                        <td v-for="e in el" width='30'>
                                            <span>{{e}}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import getChartPageInitData from "../../common/zstb/getChartPageInitData.js";
import cancelAllStyle from "../../common/zstb/cancelAllStyle.js";
import clickCheckboxFuc from "../../common/zstb/clickCheckBox.js";

export default {
  data() {
    return {
      queryNum: 30,
      checkboxGroupVar: [
        {
          title: "辅助线",
          status: 1
        },
        {
          title: "遗漏",
          status: 1
        }
      ], //多选框
      theadOneRowOtherTdData: [], //表头第一行的万位、千位等五列
      theadTwoRowData: [], //表头第二行的万位、千位等五列
      isChecked: false,
      tableTotalData: [], //表格总数据
      tbodyData: [], //tbody的内容
      tbodySecondLastRowOtherTdData: [], //当前出现次数
      tbodyLastRowOtherTdData: [], //当前最大遗漏
      isFuZhuXianChecked: true,
      isOmitChecked: true
    };
  },

  mounted() {
    getChartPageInitData(this, this.$store.state.lotteryType);
  },

  methods: {
    //切换多选框（辅助线、遗漏等）
    clickCheckbox(index) {
      clickCheckboxFuc(this, index);
    },

    //点击查询
    llQueryData() {
      if (this.queryNum > 200) {
        this.queryNum = 200;
      } else if (this.queryNum <= 0) {
        this.queryNum = 1;
      }
      cancelAllStyle(this, this.$store.state.lotteryType);
      getChartPageInitData(this, this.$store.state.lotteryType);
      this.isOmitChecked = true;
    }

    //路由变化执行的函数
    // fetchData() {
    //   if (this.$route.params.caizhongID) {
    //     getChartPageInitData(this, this.$store.state.lotteryType);
    //   }
    // }
  }
  //   watch: {
  //     $route: "fetchData"
  //   }
};
</script>
<style lang='less' scoped>
@import url(../../assets/css/chartspage.less);
</style>